'use client';

import { usePathname, useRouter } from 'next/navigation';
import { IconHome, IconCalendar, IconMap, IconSettings } from '@tabler/icons-react';

const navItems = [
    { path: '/home', icon: IconHome, label: '首页' },
    { path: '/forecast', icon: IconCalendar, label: '预报' },
    { path: '/cities', icon: IconMap, label: '城市' },
    { path: '/settings', icon: IconSettings, label: '设置' },
];

export default function BottomNav() {
    const router = useRouter();
    const pathname = usePathname();

    return (
        <nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md border-t border-gray-200">
            <div className="flex justify-around items-center h-16">
                {navItems.map(({ path, icon: Icon, label }) => (
                    <button
                        key={path}
                        onClick={() => router.push(path)}
                        className={`flex flex-col items-center p-2 rounded-lg transition-colors
                            ${pathname === path
                                ? 'text-blue-600 bg-blue-50'
                                : 'text-gray-600 hover:bg-gray-50'
                            }`}
                    >
                        <Icon size={24} />
                        <span className="text-xs mt-1">{label}</span>
                    </button>
                ))}
            </div>
        </nav>
    );
}